<template>
  <div>
    <h1>组件示例</h1>
    <template>
      <div style="display:flex; justify-content:space-between;">
        <div style="margin-right:20px;">
          <h2>原始数据</h2>

          <a-textarea v-model="oldData" :autosize="true" />
          <hr />
          <div v-html="oldData" style="white-space: pre-wrap;"></div>
        </div>
        <div>
          <h2>新数据</h2>
          <a-textarea v-model="newData" :autosize="true" />
          <hr />
          <div v-html="diffResult" style="white-space: pre-wrap;"></div>
        </div>
      </div>
      <!-- <h2>原始数据</h2>
      <div v-html="oldData" style="white-space: pre-wrap;"></div>
      <br />
      <h2>新数据</h2>
      <div v-html="diffResult" style="white-space: pre-wrap;"></div>-->
      <!-- <hr />
      <h2>原始数据</h2>
      <div v-html="oldData1" style="white-space: pre-wrap;"></div>
      <br />
      <h2>新数据</h2>
      <div v-html="diffResult1" style="white-space: pre-wrap;"></div>-->
    </template>
  </div>
</template>
<script>
import FcForm from '@/vendors/fc-ui/src/form/FCForm.vue'
// import diff from 'diff/lib/index.es6'
const diff = require('diff')
export default {
  props: [],
  data() {
    return {
      diff,
      oldData:
        '险种代码等于新能源且使用性质等于家庭自用车且新转序标识等于转保且商业险太保分属于区间[51,80]且车龄属于区间4-6年\n1.1品牌包含一汽红旗凯迪拉克\n1.2品牌等于特斯拉(中国)且统保代码等于特斯拉员I车统保代码\n以下是规则结果优先级A1\n赋值折扣1.2',
      newData:
        '险种代码等于新能源且使用性质等于家庭自用车且新转序标识等于转保且商业险太保分属于区间[61,80]且车龄属于区间5-6年\n1.1品牌包含一汽红旗|路虎\n1.2品牌等于特斯拉(中国)且统保代码等于特斯拉员工车统保代码\n以下是规则结果优先级A1\n赋值折扣1.2',
      diffResult: '',
      oldData1:
        '险种代码等于新能源且使用性质等于家庭自用车且新转序标识等于转保且商业险太保分属于区间[51,80]且车龄属于区间4-6&nbsp;年1.1品牌包含一汽红旗凯迪拉克1.2品牌等于特斯拉(中国)且统保代码等于特斯拉员I车统保代码以下是规则结果优先级A1赋值折扣1.2',
      newData1:
        '险种代码等于新能源且使用性质等于家庭自用车且新转序标识等于转保且商业险太保分属于区间[61,80]且车龄属于区间5-6&nbsp;年1.1品牌包含一汽红旗|路虎1.2品牌等于特斯拉(中国)且统保代码等于特斯拉员工车统保代码以下是规则结果优先级A1赋值折扣1.2',
      diffResult1: '',
    }
  },
  created() {
    this.diffStr()
  },
  watch: {
    oldData() {
      this.diffStr()
    },
    newData() {
      this.diffStr()
    },
  },
  components: { FcForm },
  computed: {},
  methods: {
    diffStr() {
      const result = diff.diffChars(this.oldData, this.newData)
      this.diffResult = result.reduce((pre, element) => {
        return (
          pre +
          (element.added
            ? `<span class="added">${element.value}</span>`
            : element.removed
            ? `<span class="removed">${element.value}</span>`
            : element.value)
        )
      }, '')
    },
  },
}
</script>
<style lang="css" scoped>
::v-deep .added {
  color: red;
}
::v-deep .removed {
  /* 划线 */
  text-decoration: line-through;
  color: green;
}
</style>
